<template>
   <view>
	   <view class="smart-page-head">
		   <view class="smart-page-head-title">button</view>
	   </view> 
	   <view>
		   <button type="primary">normal</button>
		   <button class="btn" type="primary":loading="isLoading" @click="btnSave">loasing</button>
		   <button type="default" disabled="false">页面次操作</button>
		   <button type="warn">警告操作 warn</button>
		   <button type="primary" plain="true">镂空按钮 plain</button>
		   <button type="primary"size="mini" class="minbutn">mini按钮</button>
	   </view>
   </view>
</template>

<script>
    export default {
		data(){
			return {
              isLoading: false,
			  }
		},
      methods:{
		  btnSave(){
			  this.isLoading = true;
			  uni.showLoading({
				  title:"数据加载中..."
              });
			setInterval(()=>{
				this.isLoading=false;
				uni.hideLoading();
			},5000)
			}
		}
}
</script>

<style>
	button {
		margin: 30upx;
	}
	.btn {
			margin: 10upx;
		}
	
	.minbutn {
		background-color: #4CD964;
		color: #333333;
		width: 200upx;
	}
</style>